<template>
  <my-div class="transfer">
     <wxc-popup :have-overlay="isTrue"
                 :show="isBottomShow"
                 @wxcPopupOverlayClicked="popupOverlayBottomClick"
                 pos="bottom"
                 height="400">
        <div class="wallet-types">
          <wxc-radio :list="wallet_types" :config="config" @wxcRadioListChecked="wxcRadioListChecked"></wxc-radio>
        </div>
    </wxc-popup>
     <head>
      <div slot="right" style="width: 36;height: 36">
        <image style="width: 36px;height: 36px" src="root:img/home/search-icon@2x.png"></image>
      </div>
    </head>
    <scroller :show-scrollbar="false">
      <div class="transfer-choose">
        <text class="transfer-title">{{$t('wallet.turn_out')}}</text>
        <div class="choose-currency">
          <text class="currency-name">{{current_wallet_type}}</text>
          <div class="currency-wrapper"  @click='isBottomShow=true'>
            <text class="choose-label">{{$t('wallet.choose_type')}}</text>
            <image style="width:18px;height:32px;margin-left:14px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
      </div>
      <div class="address-wrapper">
        <div class="wrapper">
          <text class="font24 address-label1">{{$t('wallet.turnout_adress')}}</text>
          <text class="font24 address-label2">({{$t('wallet.bitcoin')}})</text>
        </div>
        <div class="address-inter">
           <input type="text" :placeholder="$t('wallet.inputadress')" class="address-input" value="" />
          <image class="address-scan" @click="scan" src="root:img/day/wallet/saoma@2x.png"></image>
        </div>

        <div class="wrapper" style="margin-top:108px;">
          <text class="font24 address-label1">{{$t('wallet.number')}}</text>
        </div>
        <div class="address-inter">
           <input type="text" :placeholder="$t('wallet.last_small')" class="address-input" value="" />
           <text class="address-range">{{current_company_name}} | </text>
           <text class="address-all">{{$t('wallet.all')}}</text>
        </div>

         <div class="wrapper" style="margin-top:108px;">
          <text class="font24 address-label1">{{$t('wallet.hand_money')}}</text>
        </div>
        <div class="address-inter">
           <text style="color:rgba(60,71,98,1);font-size:28px;" >5.000000</text>
           <text class="address-all">{{current_company_name}}</text>
        </div>
        <div class="address-attention">
            <text class="transfer-attention">{{$t('wallet.chargealerts')}}</text>
        </div>
        <div class="address-sum">
          <text class="sum-text">{{$t('wallet.hand_money')}}</text>
          <text class="sum-text">5.0000000 {{current_company_name}}</text>
        </div>
        <div class="vent-btn">
          <text style="color:#ffffff;text-align:center;line-height:80px;font-size:28px;">{{$t('wallet.turn_out')}}</text>
        </div>
      </div>

    </scroller>

  </my-div>
</template>

<script>
import { WxcPopup,WxcRadio } from 'weex-ui';
const qr = weex.requireModule('qr')
export default {
  name: '',
  data() {
    return {
      isBottomShow:false,
      wallet_types:[],
      current_wallet_type:'',
      current_company_name:'',
      config:{
         checkedColor: 'rgba(60,71,98,1)'
      },
    }
  },
  components: {WxcPopup,WxcRadio},
  computed: {},
  created() {
    var globalEvent = weex.requireModule('globalEvent');
    var nav = weex.requireModule('navigator')
    globalEvent.addEventListener("onPageInit", () => {
      const param = nav.param()
      if(!param) return
      this.current_wallet_type = param.name
      this.current_company_name = param.companyName
      const wallet_types = param.wallet_types
      wallet_types.forEach(item => {
           this.wallet_types.push({
             title:item.name,
             value:item.name
           })
        });
    })
  },
  methods: {
     popupOverlayBottomClick () {
        this.isBottomShow = false;
    },
    // 扫码
    scan(){
      var p={};
      p.color='#000000'
      p.bgcolor='#ffffff'
      qr.open(p,(res)=>{
        var url=res.url
      })
    }
  }
}
</script>
<style scoped>
.wrapper{
  display: flex;
  flex-direction: row;
}
.transfer-choose{
  width: 720px;
  padding-left: 30px;
  height: 246px;
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;
  color: rgba(70,120,245,1);
  margin-bottom: 40px;
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 90px;
  border-radius: 10px;
}
.currency-name{
  font-size: 30px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  margin-left: 20px;
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}
.choose-label{
  font-size: 24px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
}
.address-wrapper{
  width: 690px;
  margin-left: 30px;
  margin-top: 78px;
}
.font24{
  font-size: 24px;
}
.address-label1{
  color: rgba(60,71,98,1);
}
.address-label2{
  margin-left: 16px;
  color: rgba(154,156,164,1);
}
.address-inter{
  /* margin-top: 24px; */
  height: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(233,233,233);

}
.address-scan{
  width: 30px;
  height: 28px;
  position: absolute;
  right: 0;
  font-size: 28px;
}
.address-all{
  position: absolute;
  right: 0;
  font-size: 28px;
  color: rgba(60,71,98,1);
}
.address-range{
  position: absolute;
  right: 54px;
  color: rgb(154,156,164);
  font-size: 28px;
}
.address-input{
  width: 620px;
  height: 90px;
  font-size: 28px;
}
.address-attention{
  width: 690px;
  height: 238px;
  opacity: 1;
  background-color: rgba(245,246,249,1);
  padding-left: 26px;
  padding-top: 38px;
  padding-right: 26px;
  margin-top: 84px;
}
.transfer-attention{
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
  line-height: 36px;
  lines:5;
}
.address-sum{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 84px;
}
.sum-text{
  font-size: 36px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  line-height: 36px;
}
.vent-btn{
  width: 690px;
  height: 80px;
  opacity: 1;
  background-color: rgba(70,120,245,1);
  border-radius: 10px;
  margin-top: 28px;
  margin-bottom: 30px;
}
</style>
